<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../common/css/animate.min.css">
  <link rel="stylesheet" href="../common/css/bootstrap.css">
  <link rel="stylesheet/less" href="../common/css/reset.less">
  <link rel="stylesheet/less" href="../common/css/common.less">
  <link rel="stylesheet/less" href="./index.less">
  <style>
    .active {
      background-color: #f85c5c;
    }
    .car .item .left input{
      margin: 0;
      width: 0.45rem;
      height: 0.45rem;
    }
  </style>
  <title>Document</title>
</head>
<body>
  
  <div class="box">
    <!-- 头部 -->
    <a href="../index/index.html" class="title">
      <div class="left">
        <img src="../common/images/back_icon.png" alt="">
        <span>返回</span>
      </div>
      <div class="center">
        购物车
      </div>
      <div class="right">
        <img src="../common/images/other_icon.png" alt="">
      </div>
    </a>
    <!-- 购物车 -->
    <div class="car">
      <div class="item">
        <div class="left">
          <label class="choose">
            <input type="checkbox" name="" id="">
          </label>
        </div>
        <div class="center">
          <div class="c_img">
            <img src="../common/images/car_img.png" alt="">
          </div>
          <div class="c_msg">
            <p class="name">【模板】 18K 金钻石戒指</p>
            <p class="price">￥<span class="price_">998</span></p>
            <div class="play">
              <button class="dec">-</button>
              <input type="text" name="inp1" id="inp" value="1">
              <button class="inc">+</button>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="remove">
            <img src="../common/images/remove_icon.png" alt="">
            <p>移除</p>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <label class="choose">
            <input type="checkbox" name="" id="">
          </label>
        </div>
        <div class="center">
          <div class="c_img">
            <img src="../common/images/car_img.png" alt="">
          </div>
          <div class="c_msg">
            <p class="name">【模板】 18K 金钻石戒指</p>
            <p class="price">￥<span class="price_">1549</span></p>
            <div class="play">
              <button class="dec">-</button>
              <input type="text" name="inp2" id="inp" value="1">
              <button class="inc">+</button>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="remove">
            <img src="../common/images/remove_icon.png" alt="">
            <p>移除</p>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <label class="choose">
            <input type="checkbox" name="" id="">
          </label>
        </div>
        <div class="center">
          <div class="c_img">
            <img src="../common/images/car_img.png" alt="">
          </div>
          <div class="c_msg">
            <p class="name">【模板】 18K 金钻石戒指</p>
            <p class="price">￥<span class="price_">1299</span></p>
            <div class="play">
              <button class="dec">-</button>
              <input type="text" name="inp3" id="inp" value="1" maxlength="3">
              <button class="inc">+</button>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="remove">
            <img src="../common/images/remove_icon.png" alt="">
            <p>移除</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 结算 -->
    <div class="settlement">
      <div class="left">
        <lable for="chkAll" class="choose">
          <input type="checkbox" name="" id="chkAll">
        </lable>
        <span>全选</span>
      </div>
      <div class="center">
        <p>总价 ￥<span class="total">0</span></p>
        <p>（共1件，不含运费）</p>
      </div>
      <div class="right">
        <div>去结算</div>
      </div>
    </div>
  </div>

  <script src="../common/js/jquery-3.6.0.js"></script>
  <script>
    $(document).ready(function() {

      // 全选与不全选
      $('#chkAll').change(function () {
        // 设置总复选框
        $('.car .choose input').prop("checked", $(this).prop('checked'));
        // 设置总额
        if ($(this).prop('checked') == true) {
          $('.total').text(Number($('.price_').eq(0).text())+Number($('.price_').eq(1).text())+Number($('.price_').eq(2).text()))
        } else {
          $('.total').text(0)
        }
      })
      $('.car .choose input:checkbox').change(function () {
        if ($('.car .choose input:checkbox:checked').length == $('.car .choose input:checkbox').length) {
          $('#chkAll').prop("checked",true)
        } else {
          $('#chkAll').prop("checked",false)
          // console.log($('.car .choose input:checkbox:checked').parents('.item'))
          console.log( $(this).index())
          console.log(Number($('.car .choose input:checkbox:checked').parents('.item').find('.price_').text()))
        }
      })
     
      // 加1  /  减1
      $('.dec').click(function () { 
        var v = $(this).siblings('#inp').val()
        $(this).siblings('#inp').val(Number(v)-1)
        if ($(this).siblings('#inp').val()<0) {
          $(this).siblings('#inp').val(0)
        }
      })
      $('.inc').click(function () { 
        var v = $(this).siblings('#inp').val()
        $(this).siblings('#inp').val(Number(v)+1)
      })
    })
  </script>
  <script src="../common/js/bootstrap.min.js"></script>
  <script src="../common/js/wow.min.repeat.js"></script>
  <script src="../common/js/common.js"></script>
  <script src="../common/js/less.min.js"></script>
</body>
</html>